﻿import Taro, { Component } from '@tarojs/taro'
import { Swiper, SwiperItem, Image, View, Text, RichText } from '@tarojs/components'
import '../../assets/common.scss'
import CommonJs from '../../utils/common'
import './invitepk.scss'

export default class Index extends Component {
  constructor(props) {
    super(props)
    this.state = {
      content1:{},
      content2:[],
      content4:[],
      contents:'',
      myTime:null,
      nowDate:'',
      annuvals:'',
      annuTypes:0,
      content3:'',
      grluptype:0
    }
  }
  config = {
    navigationBarTitleText: '加载中'
  }

  componentWillMount () {
    this.getdatas()
  }

  componentWillUnmount () {
    clearTimeout(this.myTime)
  }
  getdatas(){
    let _this = this
    let date = {
      shareUid:_this.$router.preload.shareUid
    }
    CommonJs.ajaxRequest('/freeGoOrder/getFreeGoOrderByShareUid',date,'GET',function(res){
      // console.log(JSON.stringify(res)+'2222222222')
      Taro.setNavigationBarTitle({title:"邀请好友PK"})
      _this.setState({
        content1: res.content
      })
      _this.titecl(res.content.theNumberOfRemCoUsers,res.content.status)
      _this.annucl(res.content.urlType,res.content.status)
      _this.getpklist(res.content.id)
      _this.countDown()
    })
  }
  getpklist(freeGoOrderId){
    let _this = this
    let date = {
      freeGoOrderId:freeGoOrderId
    }
    CommonJs.ajaxRequest('/freeGoOrderUser/getFreeGoOrderUserList',date,'GET',function(res){
      // console.log(JSON.stringify(res)+'3333333333')
      let content4 = []
      let peonumber = _this.state.content1.peonumber
      let haspeonumber = res.length
      let nopeonumber = parseInt(peonumber) - parseInt(haspeonumber)
      for (var i = 0; i < nopeonumber; i++) {
        content4.push('wenhaox.png')
      }
      _this.setState({
        content2: res,
        content4: content4
      })
    })
  }
  getMessage(){
    let _this = this
    let date = {
      type:22
    }
    CommonJs.ajaxRequest('/other/getMessageByType',date,'GET',function(res){
      // console.log(JSON.stringify(res)+'44444444444')
      _this.setState({
        grluptype: 1,
        content3: res.content
      })
    })
  }
  setgrlup(){
    let _this = this
    _this.setState({
      grluptype: 0
    })
  }
  titecl(theNumberOfRemCoUsers,status){
    // console.log(theNumberOfRemCoUsers+'//////////ssss//////////'+status)
    let _this = this
    let contents = ''
    if (theNumberOfRemCoUsers != 0) {
      contents = '还差<span style="color: #C00000;">'+theNumberOfRemCoUsers+'</span>人，人满就可以免单'
    } else if (status == 4) {
      contents = '人数已满，免单成功！'
    } else if (status == 6) {
      contents = '免单时间已到期'
    } else {
      contents = 'PK开始，胜者免单！'
    }
    _this.setState({
      contents: contents
    })
  }
  annucl(urlType,status){
    let _this = this
    let contents = ''
    let annuTypes = 0
    if (status == 2 && urlType == 2) {
      contents = '点击邀请好友PK'
      annuTypes = 1
    } else if (status == 2 && urlType == undefined) {
      contents = '点击邀请好友PK'
      annuTypes = 1
    } else if (status == 2 && urlType == 0) {
      contents = '我要参与'
      annuTypes = 2
    } else if (status == 6) {
      contents = 'PK失败'
      annuTypes = 3
    } else if (status == 4) {
      contents = '人数已满，免单成功！'
      annuTypes = 4
    } else {
      contents = '拼团成功，邀请好友打CALL'
      annuTypes = 5
    }
    _this.setState({
      annuvals: contents,
      annuTypes: annuTypes
    })
  }
  countDown(){
    //获取当前时间
    let _this = this
    let date = new Date()
    let nowDate = date.getTime()
    _this.setState({
      nowDate: nowDate
    })
    _this.myTime = setTimeout(() => { _this.countDown() }, 1000)
  }
  countDowns(dates, times){
    //倒计时处理
    let _this = this
    // console.log(JSON.stringify(dates)+'//////1111////'+JSON.stringify(times))
    if (dates >= times) {
      // console.log(JSON.stringify(dates)+'//////2222////'+JSON.stringify(times))
      
      // clearTimeout(_this.myTime)
      // _this.getgoods(1)
    } else {
      return CommonJs.countDowns(dates, times)
    }
  }
  onShareAppMessage(res){
    let content4 = this.state.content4
    let content4len = content4.length
    let titles = ''
    if (content4len > 0) {//如果pk人数未满
      titles = '火爆全国！是时候展现真正的实力了，是朋友就来PK购'
    } else {//如果pk人数已满
      titles = '考验友谊的时候到了！请帮点一下哟！'
    }
    let title = titles
    let path = '/pages/activity/activity?scene='+Taro.getStorageSync('dateinfo').qid+'&shareUid='+this.$router.preload.shareUid
    let imageUrl = this.state.content1.commodityLogo
    // console.log(path+'////////////path')
    return CommonJs.onShareAppMessage(title, path, imageUrl)
  }
  render () {
    const content1 = this.state.content1
    const content2 = this.state.content2
    const content4 = this.state.content4
    const contents = this.state.contents
    return (
      <View className='page'>
        <View className='qun-tncun' style={this.state.grluptype == 1 ? 'display:block;' : 'display:none;'} onClick={this.setgrlup.bind(this)}>
          <View className='qun-tncuncnt'>
            <View className='qun-tncuis'>
              <RichText nodes={this.state.content3}></RichText>
            </View>
          </View>
        </View>
        <View className='qun-yqmiantimes'>开奖时间: {CommonJs.FormatDate(content1.expiredCollageTime,'')}</View>
        <View className='qun-yqguize' onClick={this.getMessage.bind(this)}>
          <Image className='qun-yqguizeimg' mode='' src='https://minichat.g2ma.com/kedouimg/wenhao.png'></Image>
          <View>规则</View>
        </View>
        <View className='qun-yqinfo'>
          <View className='qun-yqcont'>
            <View className='qun-yqtupian'>
              <Image className='qun-yqtuimg' mode='widthFix' src={content1.commodityLogo ? content1.commodityLogo : 'https://minichat.g2ma.com/kedouimg/studio1.png'}></Image>
              <View className='qun-yqbotm'>
                <Text className='qun-yqtite'>{content1.commodityName}</Text>
                <Text className='qun-yqprice'>{content1.commodityPrice}￥</Text>
              </View>
            </View>
            <View className='qun-yqmianinfo'>
              <RichText className='qun-yqmiantime' nodes={contents}></RichText>
              <View className='qun-yqrenbo'>
                <View className='qun-yqrens'>
                  {content2.map((item, index) => (
                  <View className='qun-yqrycont'>
                    <View className={item.type == 1 ? 'qun-yqrnyn qun-yqcheck' : 'qun-yqrnyn'}>
                      <Image className='qun-yqtuimg' mode='widthFix' src={item.avatar != null && item.avatar != '' ? item.avatar : 'https://minichat.g2ma.com/kedouimg/ordinary.png'}></Image>
                    </View>
                    <View className='qun-yqlezu' style={item.type == 1 ? 'display:block;' : 'display:none;'}>擂主</View>
                  </View>
                  ))}
                  {content4.map((item, index) => (
                  <View className='qun-yqrycont'>
                    <View className='qun-yqrnyn'>
                      <Image className='qun-yqtuimg' mode='widthFix' src={'https://minichat.g2ma.com/kedouimg/'+item}></Image>
                    </View>
                  </View>
                  ))}
                </View>
              </View>
              <View className='qun-yqpkannu'>
                <Button style={this.state.annuTypes == 1 || this.state.annuTypes == 5 ? 'display:block;' : 'display:none;'} openType='share' className='qun-yqpkannus buttons'>{this.state.annuvals}</Button>
                <View style={this.state.annuTypes != 1 && this.state.annuTypes != 5 ? 'display:block;' : 'display:none;'} className='qun-yqpkannus'>{this.state.annuvals}</View>
              </View>
              <View className='qun-yqdjs'>
                倒计时{this.countDowns(this.state.nowDate, content1.expiredCollageTime)}后失效
              </View>
              <View className='qun-yqpkxz'>
                <View className='qun-yqfenge'></View>
                <Text className='qun-yqxztite'>PK需知</Text>
                <View className='qun-yqfenge'></View>
              </View>
              <View className='qun-yqxzlebo'>
                <View className='qun-yqlebos'>
                  <View className='qun-yqli'>
                    <Image className='qun-yqliimg' mode='' src='https://minichat.g2ma.com/kedouimg/pkyi.png'></Image>
                    <View className='qun-yqfahuo'>商品发货</View>
                  </View>
                  <View className='qun-yqli'>
                    <Image className='qun-yqliimg' mode='' src='https://minichat.g2ma.com/kedouimg/tdbuser6.png'></Image>
                    <View className='qun-yqfahuo'></View>
                  </View>
                  <View className='qun-yqli'>
                    <Image className='qun-yqliimg' mode='' src='https://minichat.g2ma.com/kedouimg/pker.png'></Image>
                    <View className='qun-yqfahuo'>邀请好友</View>
                  </View>
                  <View className='qun-yqli'>
                    <Image className='qun-yqliimg' mode='' src='https://minichat.g2ma.com/kedouimg/tdbuser6.png'></Image>
                    <View className='qun-yqfahuo'></View>
                  </View>
                  <View className='qun-yqli'>
                    <Image className='qun-yqliimg' mode='' src='https://minichat.g2ma.com/kedouimg/pksan.png'></Image>
                    <View className='qun-yqfahuo'>人满PK</View>
                  </View>
                  <View className='qun-yqli'>
                    <Image className='qun-yqliimg' mode='' src='https://minichat.g2ma.com/kedouimg/tdbuser6.png'></Image>
                    <View className='qun-yqfahuo'></View>
                  </View>
                  <View className='qun-yqli'>
                    <Image className='qun-yqliimg' mode='' src='https://minichat.g2ma.com/kedouimg/pksi.png'></Image>
                    <View className='qun-yqfahuo'>免单返款</View>
                  </View>
                </View>
              </View>
            </View>
          </View>
        </View>
      </View>
    )
  }
}

 